<template>
  <div class="course-selection">
    <h2>课程选择</h2>

    <el-table :data="courses" style="width: 100% ;margin-top: 40px;" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="课程号"></el-table-column>
      <el-table-column prop="name" label="课程名"></el-table-column>
      <el-table-column prop="teacherName" label="任课教师"></el-table-column>
      <el-table-column prop="teacherJobTitle" label="教师职称"></el-table-column>
      <el-table-column prop="credits" label="学分"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="success" @click="registerCourse(scope.row)">选择此课</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script setup>
import { reactive, computed, ref } from 'vue'
import { teacherCourseService, studentSelectCourseService } from '@/api/student.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const courses = ref([])

//展示所有课程信息
const getCourseInfo = async () => {
  const res = await teacherCourseService()
  courses.value = res.data
}
getCourseInfo()
const courseForm = reactive({
  selectedCourse: null
})

const selectedCourses = reactive([])

const registerCourse = async (student) => {
  //选课
  await ElMessageBox.confirm('你确认要选择该课程么', '温馨提示', {
    type: 'success',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await studentSelectCourseService(student.id)
  getCourseInfo()
  ElMessage.success('选课成功!')

}

</script>

<style scoped>
.course-selection {
  padding: 0 20px;
}

h2 {
  text-align: center;
}

.total-credits {
  margin-top: 20px;
  font-weight: bold;
}
</style>
